import React, { useState } from 'react'
import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

export default function Us() {
    const navigate = useNavigate()
    const [imageSrc, setImageSrc] = useState('https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84/u2603.svg');
    const back = () => {
        navigate('/app/my')
    }
    const handleFileChange = (event) => {
        const file = event.target.files[0];
        if (file && file.type.startsWith("image/")) {
            const reader = new FileReader();
            reader.onload = () => setImageSrc(reader.result);
            reader.readAsDataURL(file);
        } else {
            alert("请上传图片格式文件（JPG/PNG）");
        }
    };
    return (
        <div>
            <NavBar onBack={back}>
                <h3>我的信息</h3>
            </NavBar>
            <hr />
            <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "200px", flexDirection: "column", }}>
                <label style={{ width: '80px', height: '80px', borderRadius: '50%', overflow: 'hidden', border: '2px solid #ccc', display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }}>
                    <input
                        type="file"
                        accept="image/*"
                        onChange={handleFileChange}
                        style={{ display: "none" }}
                    />
                    {imageSrc ? (
                        <img src={imageSrc} alt="Avatar" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                    ) : (
                        <div style={{ color: '#aaa', fontSize: '14px' }}>上传头像</div>
                    )}
                </label>
                <p style={{ fontSize: '18px', color: 'rgb(134, 93, 40 )', marginTop: '5px' }}>知遗</p>
            </div>
            <div style={{ width: '100%', height: '80px', borderBottom: '1px solid #eee', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <p style={{ marginLeft: '20px', fontSize: '18px' }}>昵称</p>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <p style={{ fontSize: '16px', marginRight: '15px' }}>守护者</p>
                    <img style={{ width: '10px', height: '10px', marginRight: '20px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%BA%97%E9%93%BA%E8%AF%A6%E6%83%85/u1754.svg' />
                </div>
            </div>
            <div style={{ width: '100%', height: '80px', borderBottom: '1px solid #eee', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <p style={{ marginLeft: '20px', fontSize: '18px' }}>手机</p>
                <p style={{ fontSize: '16px', marginRight: '40px' }}>158****6583</p>
            </div>
            <div style={{ width: '100%', height: '80px', borderBottom: '1px solid #eee', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <p style={{ marginLeft: '20px', fontSize: '18px' }}>地址</p>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <p style={{ fontSize: '16px', marginRight: '15px' }}>河北 保定 莲池区</p>
                    <img style={{ width: '10px', height: '10px', marginRight: '20px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%BA%97%E9%93%BA%E8%AF%A6%E6%83%85/u1754.svg' />
                </div>
            </div>
            <div style={{ width: '100%', height: '80px', borderBottom: '1px solid #eee', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <p style={{ marginLeft: '20px', fontSize: '18px' }}>签名</p>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <p style={{ fontSize: '16px', marginRight: '15px' }}>
                        在非遗里，寻找心灵的归宿，每一个故<br />事，都让我更加热爱这片土地
                    </p>
                    <img style={{ width: '10px', height: '10px', marginRight: '20px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%BA%97%E9%93%BA%E8%AF%A6%E6%83%85/u1754.svg' />
                </div>
            </div>
        </div>
    )
}